<template>
  <div class="wbs-container">
    <div class="title">基础字段管理</div>
    <CustomTabs v-model="activeTab" :items="tabItems" :showAddButton="false">
      <template #content="{ activeTab: tabItem }">
        <div v-show="tabItem?.title === '项目字段模板'">
          <FieldsTemplate type="PROJECT_TYPE" />
        </div>
        <div v-show="tabItem?.title === '任务字段模板'">
          <FieldsTemplate type="TASK_TYPE" />
        </div>
      </template>
    </CustomTabs>
  </div>
</template>
<script setup lang="ts">
  import CustomTabs from "@/components/CustomTabs.vue";
  import type { TabItem } from "@/data/wbsFields";
  import { ref } from "vue";
  import FieldsTemplate from "@/views/pm/globalSetting/customFieldsTemplate/fieldsTemplate.vue";

  // 标签页数据
  const activeTab = ref<number>(1);

  const tabItems = ref<TabItem[]>([
    {
      id: 1,
      title: "项目字段模板",
      closable: false,
    },
    {
      id: 2,
      title: "任务字段模板",
      closable: false,
    },
  ]);
</script>

<style scoped lang="scss">
  $primary-color: #1890ff;
  $success-color: #52c41a;
  $warning-color: #fa8c16;
  $danger-color: #ff4d4f;
  $text-color: #42464e;
  $light-text: rgba(0, 0, 0, 0.5);
  $border-color: #e0e0e0;
  $background-color: #f8f9fa;
  $hover-bg: #e6f7ff;

  .title {
    font-size: 16px;
    color: #141414;
    font-weight: 600;
    margin: 12px 0 0 12px;
  }

  .batch-btn {
    padding: 4px 12px;
    background-color: #fff;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    color: #ff4d4f;
  }

  .toolbar-btn {
    border: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: $text-color;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;

    .icon {
      font-size: 16px;
    }

    &:hover {
      border-color: $primary-color;
      background: $hover-bg;
    }

    &.active {
      color: $primary-color;
      border-color: $primary-color;
      background: $hover-bg;
    }
  }
  .wbs-container {
    background-color: #ffffff;
  }

  /* 滚动条样式 */
  .wbs-tree-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .wbs-tree-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .wbs-tree-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }

  .wbs-tree-container::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
</style>
